<template>
    <div>
        <el-drawer title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info">
            <div class="info-item">
                <h5 class="from-title">基本信息</h5>
                <div class="form-item">
                    <label class="form-item-label">标题:</label>
                    <div class="form-item-content">{{ objInfo.title }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">作者:</label>
                    <div class="form-item-content">{{ objInfo.author }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">来源:</label>
                    <div class="form-item-content">{{ objInfo.source }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">内容:</label>
                    <div class="form-item-content" v-html="objInfo.contents"></div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">摘要:</label>
                    <div class="form-item-content">{{ objInfo.info }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">关键字:</label>
                    <div class="form-item-content">{{ objInfo.keywords }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">缩略图:</label>
                    <div class="form-item-content" ><img v-if="objInfo.picname" :src="objInfo.picname" style="width: 100px; height: 100px" /></div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">发布人:</label>
                    <div class="form-item-content">{{ objInfo.publisher }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">发布时间:</label>
                    <div class="form-item-content">{{ objInfo.pubdate }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">访问地址:</label>
                    <div class="form-item-content">{{ objInfo.url }}
                    </div>
                </div>

                <div class="form-item">
                    <label class="form-item-label">属性:</label>
                    <div class="form-item-content">{{ objInfo.attrName }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">标签:</label>
                    <div class="form-item-content">{{ objInfo.tagName }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">专题:</label>
                    <div class="form-item-content">{{ objInfo.specialName }}
                    </div>
                </div>


                <div class="form-item">
                    <label class="form-item-label">浏览次数:</label>
                    <div class="form-item-content">{{ objInfo.click }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">权重排序:</label>
                    <div class="form-item-content">{{ objInfo.sort }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">状态:</label>
                    <div class="form-item-content">{{ objInfo.statusName }}</div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">审核人:</label>
                    <div class="form-item-content">{{ objInfo.auditer }}
                    </div>
                </div>
                <div class="form-item">
                    <label class="form-item-label">审核意见:</label>
                    <div class="form-item-content">{{ objInfo.auditop }}
                    </div>
                </div>
              <div class="form-item">
                <label class="form-item-label">栏目:</label>
                <div class="form-item-content">{{ objInfo.channelIdName }}</div>
              </div>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    import { cmsarticleInfo } from "@/api/cms/cmsarticle.js";
    import {cmssystagList} from "@/api/cms/cmssystag.js"
    import {cmscusttagList} from "@/api/cms/cmscusttag.js"
    import {cmssubjectList} from "@/api/cms/cmssubject.js"
    import { enumList, } from "@/api/public.api.js";
    export default {
        data() {
            return {
                drawer: true,
                direction: "rtl",
                objInfo: {},
                ArticleStatus_cmsList:[],
                attrList:[],
                tagList:[],
                specialList:[]
            }
        },
        created() {
            this.getAttrList();
        },
        methods: {
            getAttrList(){
                cmssystagList().then((resp) => {
                    if (resp.code == 0) {
                    this.attrList = resp.data;
                    }
                });
                cmscusttagList().then((resp) => {
                    if (resp.code == 0) {
                    this.tagList = resp.data;
                    }
                });
                cmssubjectList().then((resp) => {
                    if (resp.code == 0) {
                    this.specialList = resp.data;
                    }
                });
            },
          queryEnumList(){
              this.ArticleStatus_cmsList = [];
              enumList("ArticleStatus","cms").then((resp) => {
                if (resp.code == 0) {
                  this.ArticleStatus_cmsList = resp.data;
                }
              });
          },
            init(id) {
                this.queryEnumList();
                if (id) {
                   cmsarticleInfo(id).then(res => {
                        this.objInfo = res.data                    
                        //文章属性
                        this.objInfo.attrName="";
                        if (this.objInfo.attr) {
                            this.attrList.forEach(item =>{
                                    this.objInfo.attr.forEach((o) => {
                                    if (o == item.id) {
                                        this.objInfo.attrName += item.title + " ";
                                    }
                                });
                            })
                        }
                        //文章标签
                        this.objInfo.tagName="";
                        if (this.objInfo.tags) {
                            this.tagList.forEach(item =>{
                                    this.objInfo.tags.forEach((o) => {
                                    if (o == item.id) {
                                        this.objInfo.tagName += item.title + " ";
                                    }
                                });
                            })
                        }
                        //文章专题
                        this.objInfo.specialName="";
                        if (this.objInfo.special) {
                            this.specialList.forEach(item =>{
                                    this.objInfo.special.forEach((o) => {
                                    if (o == item.id) {
                                        this.objInfo.specialName += item.name + " ";
                                    }
                                });
                            })
                        }
                        let statusObj = this.ArticleStatus_cmsList.find((item) => {
                        return item.code == this.objInfo.status;
                        });
                        this.objInfo.statusName = statusObj ? statusObj.name : "";
                   })

                }
                this.drawer = true
            },
            // 关闭抽屉
            handleClose(done) {
                done()
            },
        },
    }
</script>
<style scoped>
    .from-title {
        margin-bottom: 20px;
        padding: 0 20px 20px 20px;
        font-size: 16px;
        color: #17233d;
        border-bottom: 1px solid #eee;
    }
    .info-item {
        margin-bottom: 40px;
    }

    .form-item {
        margin-bottom: 20px;
        font-size: 14px;
    }
    .form-item-label {
        text-align: right;
        float: left;
        width: 25%;
    }
    .form-item-content {
        margin-left: 30%;
        width: 70%;
    }
</style>
